.fx-color {
  > .fx-color-input {
    cursor: pointer;
    width: 120px;
    height: $height-default;
    border: 1px solid $border-color-default;
    border-radius: $border-radius;
    background-color: #fff;
    padding: 5px;
    box-sizing: border-box;
    display: flex;

    > .fx-color-inner {
      width: 100%;
      height: 100%;
      border-radius: $border-radius;
      margin-right: 5px;
    }
  }

  > .fx-color-picker-wrapper {
    user-select: none;
    padding: 5px;
    position: fixed;
    background-color: #fff;
    box-shadow: $border-shadow;

    > .fx-color-picker {
      width: 220px;
      height: 150px;
      position: relative;
      overflow: hidden;
      user-select: none;

      > .fx-color-marker {
        position: absolute;
        cursor: pointer;
        width: 4px;
        height: 4px;
        box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4);
        border-radius: 50%;
        transform: translate(-2px, -2px);
      }

      > .fx-color-white, > .fx-color-black {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      > .fx-color-white {
        background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
      }

      > .fx-color-black {
        background: linear-gradient(0deg, #000, transparent);
      }
    }

    > .fx-color-picker-bar {
      user-select: none;
      cursor: pointer;
      margin-top: 5px;
      background-color: #f00;
      width: 100%;
      height: 8px;
      position: relative;

      > .fx-color-picker-wave {
        width: 100%;
        height: 100%;
        position: absolute;
        background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
      }

      > .fx-color-picker-bar-marker {
        cursor: pointer;
        width: 4px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        left: 10px;
        top: 0;
        border: 1px solid #f0f0f0;
        box-shadow: $border-shadow;
        transform: translateX(-2px);
      }
    }
  }
}
